<template>
  <view>
    <div class="Stock">
      <form v-show="!isReg" class="login-form">
        <div class="Stock-text">
          <div class="logo-text" style="text-align:center;margin: 0 auto;display: block;margin-bottom: 20px;">
            <img :src="config.logo" style="width:80px;background: #000;border-radius: 50%;padding:10px;"/>
            <div style="margin-top:20px;font-weight:bold;">{{ config.title }}</div>
            <!-- <view class="" style="font-family: xjl;font-size: 16px;padding-top: 15px;">
              底数清 情况明 数据准
            </view> -->
            <img src="../static/img/pp.png" style="width: 230px;margin-top: 8px;"/>
          </div>
        </div>
        <div style="margin:20px 0px 40px 0;">
          <div class=" Stock-dit">
            <input
                id="input-username"
                v-model="username"
                class="form-input"
                cursor-spacing="10"
                maxlength="11"
                placeholder="登录账号"
                type="text"
                @blur="blur"
                @focus="focus"
            />
            <span class="span" data-placeholder=""></span>
          </div>
          <div class="Stock-dit">
            <input
                id="input-password"
                v-model="verifyCode"
                class="form-input"
                cursor-spacing="10"
                placeholder="请输入短信验证码"
                style="width: 165px;"
                type="text"
                @blur="blur"
                @focus="focus"
            />
            <span class="span" data-placeholder=""></span>
            <div>
              <button class="m-btn sendVerifyCode" type="button" @click="sendVerifyCode(0)">获取验证码</button>
              <button class="x-btn verifyCodeTime" style="display: none;" type="button">{{ timeCount }}秒重新获取</button>
            </div>
          </div>
        </div>

        <view class="logbtn" @click="loginClick">登录</view>
        <div class="mt30 needss" style="justify-content: flex-end;">
          <label @click="isReg = true">
            <a class="hva"><span class="needs">注册账户</span></a>
          </label>
        </div>
        <!-- <p class="icp">
          Copyright&nbsp;©&nbsp;
          <a href="http://www.xxx.net">xxx.net</a>
          2000-2023 浙ICP备000000号-1
        </p> -->
      </form>
      <form v-show="isReg" class="login-form">
        <div style="margin-top:20px;font-weight:lighter;color: #fff;font-size:24px;">注册账户</div>
        <div style="margin:30px 0px;">
          <div class="needss bd">
            <div class="dbl">用户名</div>
            <div class="dbr">
              <div class="input">
                <input v-model="form.name" class="form-input" cursor-spacing="10" placeholder="用户名" type="text"/>
                <span data-placeholder=""></span>
              </div>
            </div>
          </div>
          <div class="needss bd">
            <div class="dbl">登录账号</div>
            <div class="dbr">
              <div class="input">
                <input v-model="form.mobile" class="form-input" cursor-spacing="10" maxlength="11" placeholder="登录账号"
                       type="tel"/>
                <span data-placeholder=""></span>
              </div>
            </div>
          </div>
          <div class="Stock-dit" style="margin-top:15px;width:500px ;">
            <input
                v-model="form.verifyCode"
                class="form-input"
                cursor-spacing="10"
                placeholder="请输入短信验证码"
                style="width: 375px;border:1px solid #fff;"
                type="text"
            />
            <span data-placeholder=""></span>
            <div>
              <button class="m-btn sendVerifyCode" type="button" @click="sendVerifyCode(1)">获取验证码</button>
              <button class="x-btn verifyCodeTime" style="display: none;" type="button">{{ timeCount }}秒重新获取</button>
            </div>
          </div>
          <div class="needss">
            <view class="logbtn" style="margin-top:40px ;" @click="btnRegister">注册</view>
            <view class="logbtn" style="margin-left: 20px;margin-top:40px ;" @click="isReg = false">取消</view>
          </div>
        </div>
      </form>
    </div>

    <div>
      <video
          :controls="false"
          :show-center-play-btn="false"
          :show-play-btn="false"
          :show-progress="false"
          :x5-video-player-fullscreen="true"
          autoplay
          class="vidbacking-active-body-back"
          loop
          muted
          object-fit="cover"
          playsinline
          poster="../static/img/Stock-f.jpg"
          src="../static/media/video.mp4"
          webkit-playsinline
          x5-playsinline
      ></video>
      <div class="clearfix"></div>
    </div>
    <div class="Stock-mask" style="opacity: 1;">&nbsp;</div>
  </view>
</template>

<script>
import {mapMutations} from 'vuex';
import env from '@/common/utils/env.js';
import {register} from '@/common/services/home.js';

export default {
  data() {
    return {
      submit: false,
      isReg: false,
      config: env,
      redirect: '/home',
      username: '176****0345',
      verifyCode: '1234',
      timeCount: 60,
      interval: null,
      form: {
        name: '',
        mobile: '',
        verifyCode: ''
      }
    };
  },
  onLoad(options) {
    // this.redirect = options.redirect || this.redirect;
    this.$watermark.set("");
  },
  methods: {
    ...mapMutations(['login']),
    sendVerifyCode(index) {
      if (this.interval) {
        return;
      }
      const reg = /^[1][3-9][0-9]{9}$/;
      let mobile = this.username;
      if (index === 1) {
        mobile = this.form.mobile;
      }
      if (!reg.test(mobile)) {
        this.$message.error('请输入正确的手机号码');
        return;
      }

      let sendDom = document.getElementsByClassName('sendVerifyCode');
      let timeDom = document.getElementsByClassName('verifyCodeTime');
      for (let i = 0; i < sendDom.length; i++) {
        sendDom[i].style.display = 'none';
        timeDom[i].style.display = 'flex';
      }

      let count = this.timeCount;
      this.interval = setInterval(() => {
        if (count > 0) {
          --count;
          this.timeCount = count;
        } else {
          timeDom[0].style.display = 'none';
          sendDom[0].style.display = 'flex';
          timeDom[1].style.display = 'none';
          sendDom[1].style.display = 'flex';
          clearInterval(this.interval);
        }
      }, 1000);
    },
    loginClick() {
      if (this.submit) {
        return;
      }
      this.$message.closeAll();
      if (this.username === '') {
        this.$message.error('请输入登录账号');
        return;
      }
      if (this.verifyCode === '') {
        this.$message.error('请输入验证码');
        return;
      }
      this.submit = !this.submit;
      let params = {
        username: this.username,
        verifyCode: this.password
      };
      let that = this;
      this.$login(
          params,
          data => {
            that.login(data);
            this.submit = !this.submit;
            window.location.href = that.redirect;
          },
          () => {
            this.submit = !this.submit;
          }
      );
    },
    btnRegister() {
      if (this.submit) {
        return;
      }
      this.$message.closeAll();
      if (this.form.name === '') {
        this.$message.error('请输入姓名');
        return;
      }
      if (this.form.mobile === '') {
        this.$message.error('请输入登录手机号');
        return;
      }
      if (this.form.verifyCode === '') {
        this.$message.error('请输入验证码');
        return;
      }
      this.submit = !this.submit;
      register(this.form)
          .then(res => {
            this.$utils.notify('注册成功,请等待管理员审核.');
            this.isReg = false;
            this.submit = !this.submit;
          })
          .catch(() => {
            this.submit = !this.submit;
          });
    },
    blur(e) {
      let dom = document.getElementById(e.target.id);
      dom.removeAttribute('class');
    },
    focus(e) {
      let dom = document.getElementById(e.target.id);
      let att = document.createAttribute('class');
      att.value = 'focus';
      dom.setAttributeNode(att);
    }
  }
};
</script>

<style scoped>
@import '@/static/css/Stock.css';
</style>
<style lang="scss" scoped>
::v-deep .el-select,
::v-deep .el-cascader {
  padding-right: 20px;
  width: 100%;

  .el-input__inner {
    border: none;
    font-size: 16px;
  }

  .el-input__suffix {
    right: 20px;
    display: none;
  }

  .is-disabled {
    .el-input__inner {
      background-color: initial;
    }
  }
}
</style>
